{% import 'apostrophe-ui:components/buttons.html' as buttons with context %}

{% macro menuItem(content, options) -%}
  <li class="apos-dropdown-item" data-apos-{{ content.action }}{% if content.value %}="{{ content.value }}"{% endif %}>
    {{ __ns('apostrophe', content.label | d('')) }}
  </li>
{%- endmacro %}

{% macro base(menu, type, options) -%}
  {%- if options.direction -%}
    {%- set direction = options.direction -%}
  {%- else -%}
    {%- set direction = 'up' -%}
  {%- endif -%}

  <div class="apos-dropdown apos-dropdown--{{ type }} apos-dropdown--{{ direction }}{% if options.class %} apos-dropdown--{{ options.class}}{% endif %}"{%- if options.action -%} data-apos-{{ options.action }}{%- endif %} data-apos-dropdown="{{ direction }}" data-apos-dropdown-name="{{ menu.name }}" data-apos-actionable>
    {%- if type == 'button' -%}
      {%- if options.buttonType -%}
        {{ buttons[options.buttonType](menu.label, apos.utils.merge({ action: 'dropdown-button-label' }, options) ) }}
      {%- else -%}
        {{ buttons.normal(menu.label, apos.utils.merge({ action: 'dropdown-button-label' }, options)) }}
      {%- endif -%}
    {%- elif type == 'admin' -%}
      {# TODO: is this dead code? adminBar.html appears to output its own #}
      <div class="apos-admin-bar-item-inner">
        {{ __ns('apostrophe', menu.label | d('')) }}
      </div>
    {%- endif -%}
    <ul class="apos-dropdown-items" data-apos-dropdown-items>
      {%- if options.listMacro -%}
        {{ options.listMacro(menu.items) }}
      {%- else -%}
        {% for item in menu.items %}
          {{ menuItem(item, options) }}
        {%- endfor -%}
      {%- endif -%}
    </ul>
  </div>
{%- endmacro %}
